<template>
  <div class="word">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="">
        <el-input v-model="formInline.en" placeholder="输入单词搜索"></el-input>
      </el-form-item>
      <el-form-item label="">
        <el-select v-model="formInline.category" placeholder="所属类别">
          <el-option label="全部" value=""></el-option>
          <el-option label="小学" value="0"></el-option>
          <el-option label="初中" value="1"></el-option>
          <el-option label="高中" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="">
        <el-select v-model="formInline.wordRepoId" placeholder="所属词库">
          <el-option label="全部" value=""></el-option>
          <el-option v-for="item in books" :label="item.wordRepoName" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="">
        <el-select v-model="formInline.wordUnitId" placeholder="所属关卡">
          <el-option label="全部" value=""></el-option>
          <el-option v-for="item in levels" :label="item.name" :value="item.wordUnitId"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
      <el-form-item>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="add">新增</el-button>
        <el-button type="primary" @click="delWord()">批量删除</el-button>
        <el-button type="primary" @click="$router.push({path:'/imports',query:{type:'3'}})">单词导入</el-button>
        <el-button type="primary" @click="$router.go(-1)">返回</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="tableData.list" border style="width: 100%" @selection-change="selChange">
      <el-table-column type="selection">
      </el-table-column>
      <el-table-column fixed prop="en" label="单词" width="150">
      </el-table-column>
      <el-table-column prop="voice" label="音标">
      </el-table-column>
      <el-table-column prop="cn" label="语性释意" width="120">
      </el-table-column>
      <el-table-column prop="wordUnitName" label="所属关卡" width="120">
      </el-table-column>
      <el-table-column prop="wordRepoName" label="所属词库" width="120">
      </el-table-column>
      <el-table-column prop="categaryName" label="所属类别" width="120">
      </el-table-column>
      <el-table-column label="创建时间" width="200">
        <template slot-scope="scope">
          {{scope.row.createTime |formatTime }}
        </template>
      </el-table-column>
      <el-table-column label="最后编辑时间" width="200">
        <template slot-scope="scope">
          {{scope.row.updateTime |formatTime }}
        </template>
      </el-table-column>
      <el-table-column prop="address" label="操作" fixed="right" width="200">
        <template slot-scope="scope">
          <el-button type="text" @click="write(scope.row)">编辑</el-button>
          <el-button type="text" @click="ids.push(scope.row.wordId);delWord()">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination :pageIndex='formInline.pageIndex' :total="tableData.total" @getListResult="findWordPage" />
    <el-dialog :title="isAdd?'新增':'编辑'" :visible.sync="showWrite" @close="writeItem={}">
      <el-form ref="form" label-width="100px">
        <el-form-item label="单词 ：" class="is-required">
          <el-input v-model="writeItem.en"></el-input>
        </el-form-item>
        <el-form-item label="词性释意 ：">
          <el-input v-model="writeItem.cn"></el-input>
        </el-form-item>
        <el-form-item label="音标 ：">
          <el-input v-model="writeItem.voice"></el-input>
        </el-form-item>
        <el-form-item label="所属词库 ：" class="is-required">
          <el-select :disabled="!isAdd" v-model="writeItem.wordRepoId" placeholder="请选择所属词库">
            <el-option v-for="item in addBooks" :label="item.wordRepoName" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属关卡 ：" class="is-required">
          <el-select :disabled="!isAdd" v-model="writeItem.wordUnitId" placeholder="请选择所属关卡">
            <el-option v-for="item in addLevels" :label="item.name" :value="item.wordUnitId"></el-option>
          </el-select>
        </el-form-item>
        <!--<el-form-item label="所属类别 ：" class="is-required">
            <el-select :disabled="!isAdd" v-model="writeItem.category" placeholder="请选择所属类别">
              <el-option label="小学" :value="0" ></el-option>
              <el-option label="初中" :value="1" ></el-option>
              <el-option label="高中" :value="2" ></el-option>
            </el-select>
          </el-form-item>-->
        <el-form-item>
          <el-button type="primary" @click="updateUser">确定</el-button>
          <el-button @click="showWrite=false;writeItem={}">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script lang='ts'>
import Vue from 'vue'
import { Component, Watch } from 'vue-property-decorator'
import Pagination from 'base/Pagination.vue'
import { findWordPage, delWord, addWord, updateWord } from 'service/word.ts'
import { findWordRepoPage } from 'service/book.ts'
import { findWordUnitPage } from 'service/level.ts'
import util from 'assets/js/util'
import storage from 'assets/js/storage'
@Component({
  name: 'word',
  components: {
    Pagination
  },
})
export default class Word extends Vue {
  // data
  ids: any[] = []
  sTime: any[] = []
  formInline: any = {
    en: '',
    pageIndex: 1,
    pageSize: 10,
    wordRepoId: null,
    wordUnitId: null,
    category: null
  };
  writeItem: any = {wordRepoId:'',wordUnitId:''}
  showWrite: boolean = false
  tableData: any = {};
  books: any = []
  addBooks: any = []
  levels: any = []
  addLevels: any = []
  isAdd: boolean = false
  @Watch('formInline.category')
  watchCategory(newVal: any[], oldVal: any[]) {
    this.findWordRepoPage({ category: newVal }, '0')
    console.log('new'+newVal,'old'+oldVal)
    oldVal!==null? this.formInline.wordRepoId=null:''
  }
  @Watch('writeItem.category')
  watchAddCategory(newVal: any[], oldVal: any[]) {
    this.findWordRepoPage({ category: newVal }, '1')
  }
  @Watch('formInline.wordRepoId')
  watchBook(newVal: any[], oldVal: any[]) {
    this.findWordUnitPage({ wordRepoId: newVal }, '0')
    oldVal!==null? this.formInline.wordUnitId=null:''
  }
  @Watch('writeItem.wordRepoId')
  watchAddBook(newVal: any[], oldVal: any[]) {
    this.findWordUnitPage({ wordRepoId: newVal }, '1')
    this.writeItem.wordUnitId&&this.isAdd?this.writeItem.wordUnitId='':''
  }
  @Watch('sTime')
  watchTime(newVal: any[], oldVal: any[]) {
    if (newVal) {
      this.formInline.regTimeStart = util.formatTime(newVal[0], 'YYYY-MM-DD') + ' 00:00:00'
      this.formInline.regTimeEnd = util.formatTime(newVal[1], 'YYYY-MM-DD') + ' 23:59:59'
    } else {
      this.formInline.regTimeStart = ""
      this.formInline.regTimeEnd = ""
    }
  }

  created() {
    this.formInline.wordRepoId = this.$route.query.bookId
    this.formInline.wordUnitId = this.$route.query.unitId
    this.formInline.category = this.$route.query.category
    this.findWordPage({})
    this.findWordRepoPage({}, '0')
    // this.findWordUnitPage({}, '0')
    this.findWordRepoPage({},'1')
    // this.findWordUnitPage({},'1')
  }
  async findWordUnitPage(opt: any, type: string) {
    let { data } = await findWordUnitPage({ pageIndex: 1, pageSize: 1000000, ...opt })
    if (data.success) {
      if (type === '0') {
        this.levels = data.data.list
      } else {
        this.addLevels = data.data.list
      }
    }
  }
  async findWordRepoPage(opt: any, type: string) {
    let { data } = await findWordRepoPage({ pageIndex: 1, pageSize: 1000000, ...opt })
    if (data.success) {
      if (type === '0') {
        this.books = data.data.list
      } else {
        this.addBooks = data.data.list
      }
    }
  }
  async write(item: any) {
    console.log(item)
    this.writeItem = {...item}
    this.showWrite = true
    this.isAdd=false
  }
  add() {
    this.isAdd = true
    // this.writeItem.wordRepoId=this.$route.query.bookId
    // this.writeItem.wordUnitId=this.$route.query.unitId
    this.showWrite = true
  }
  async delWord() {
    if (!this.ids.length) {
      this.$alert('请选择至少一个单词')
      return
    }
    this.$confirm('是否确定删除？', '提示').then(async () => {
      let { data } = await delWord({ ids: this.ids.join(',') })
      if (data.success) {
        this.ids = []
        this.$message('操作成功')
        this.findWordPage({})
      }
    })
  }
  async findWordPage(opt: any) {
    this.$loading({})
    let { data } = await findWordPage({ ...this.formInline, ...opt })
    if (data.success) {
      if (opt && opt.pageIndex) {
        this.formInline.pageIndex = opt.pageIndex
      }
      this.tableData = data.data
      this.$loading({}).close()
    }
  }
  onSubmit() {
    if (this.formInline.pageIndex === 1) {
      this.findWordPage({})
    } else {
      this.formInline.pageIndex = 1
    }

  }
  selChange(val: any) {
    console.log(val)
    this.ids = []
    val.map((item: any, i: number) => {
      this.ids.push(item.wordId)
    })
  }
  async updateUser(val: any) {
    if (!this.writeItem.en||!this.writeItem.en.trim()) {
      this.$message('单词不可以为空')
      return
    }
    if (this.writeItem.en.length > 1024) {
      this.$message('单词长度不可以超过1024字')
      return
    }
    if (!this.writeItem.wordUnitId) {
      this.$message('请选择关卡')
      return
    }
    if (!this.writeItem.wordRepoId) {
      this.$message('请选择词库')
      return
    }
    if (this.isAdd) {
      let { data } = await addWord(this.writeItem)
      if (data.success) {
        this.$message('新增成功')
        this.writeItem = {}
        this.showWrite = false
      }
    } else {
      let { data } = await updateWord({ ...this.writeItem, id: this.writeItem.wordId })
      if (data.success) {
        this.$message('更新成功')
        this.writeItem = {}
        this.showWrite = false
      }
    }
    this.findWordPage({})

  }
}
</script>

<style lang="stylus" scoped>
</style>
